<template>
  <div class="china-map" id="map"></div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china";
export default {
  name: "ChinaMap",
  props: {
    datas: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      myChart: null,
      option: null,
      showItemProvince: "北京"
    };
  },
  mounted() {
    if (this.datas && Object.keys(this.datas).length > 0) {
      this.updateMap();
    }
  },
  methods: {
    handleClickMap(params) {
      const name = params.name;
      this.showItemProvince = name;
      this.showMap();
    },
    showMap() {
      const datas = this.datas;
      const showItemProvince = this.showItemProvince;
      let showItem = datas.distribution.find(
        item => item.province === showItemProvince
      );
      if (!showItem) {
        showItem = {
          province: showItemProvince,
          count: 0,
          onlineCount: 0,
          outlineCount: 0
        };
      }
      if (datas && datas.equipmentCount) {
        const dom = document.querySelector("#map");
        this.myChart = this.myChart || echarts.init(dom);
        const option = {
          title: [
            {
              text: `当前在线设备数量：${datas.equipmentCount} 台`,
              textStyle: {
                color: "#fff"
              },
              left: "50%",
              top: 10,
              textAlign: "center",
              subtext: new Date().toLocaleString(),
              subtextStyle: {
                color: "#fff",
                align: "center"
              }
            },
            {
              subtext: `当前显示地区：${showItem.province}`,
              subtextStyle: {
                color: "#fff"
              },
              left: "3%",
              bottom: "30%"
            },
            {
              subtext: `设备总数量：${showItem.count}台`,
              subtextStyle: {
                color: "#fff"
              },
              left: "3%",
              bottom: "26%"
            },
            {
              subtext: `设备在线数量：${showItem.onlineCount}台`,
              subtextStyle: {
                color: "#fff"
              },
              left: "3%",
              bottom: "22%"
            },
            {
              subtext: `设备不在线数量：${showItem.outlineCount}台`,
              subtextStyle: {
                color: "#fff"
              },
              left: "3%",
              bottom: "18%"
            }
          ],
          tooltip: {
            trigger: "item",
            show: true,
            formatter(p) {
              const name = p.name;
              const item = datas.distribution.find(
                item => item.province === name
              );
              let count = 0,
                onlineCount = 0,
                outlineCount = 0;
              if (item) {
                count = item.count;
                onlineCount = item.onlineCount;
                outlineCount = item.outlineCount;
              }
              return `当前显示地区：${name}<br>
                    设备总数量：${count}台<br>
                    设备在线数量：${onlineCount}台<br>
                    设备不在线数量：${outlineCount}台`;
            }
          },
          lable: {
            show: true
          },
          series: [
            {
              type: "map",
              map: "china",
              itemStyle: {
                normal: {
                  areaColor: "#0f54c7",
                  label: {
                    color: "white",
                    fontSize: 9,
                    show: true
                  }
                }
              }
            }
          ]
        };
        this.option = option;
        this.myChart.setOption(option);
        this.myChart.on("click", this.handleClickMap);
      }
    },
    updateMap() {
      this.showMap();
      setTimeout(() => {
        this.updateMap();
      }, 1000);
    }
  }
};
</script>

<style scoped lang="less">
.china-map {
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  height: 90.6vh;
}
</style>
